<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>table模块快速使用</title>
    <link rel="stylesheet" href="kit-admin/plugins/layui/css/layui.css" media="all">
</head>

<body>

<div class="layui-btn-group demoTable">
    <button class="layui-btn" data-type="query">查询部门</button>
    <button class="layui-btn" data-type="add">新增部门</button>
    <button class="layui-btn" data-type="edit">编辑部门</button>
</div>
<table class="layui-table" lay-data="{height:315, url:'departmentController.do?dataGrid', page:true, height: 'full-60'}" lay-filter="department" id="department">
    <thead>
    <tr>
        <th lay-data="{type:'checkbox', fixed: 'left'}"></th>
        <th lay-data="{field:'id', width:200, sort: true}">id</th>
        <th lay-data="{field:'department', width:200, sort: true}">部门</th>
    </tr>
    </thead>
</table>
<#include "/common/array2json.ftl"/>

<script src="kit-admin/plugins/layui/layui.js"></script>
<script>
    layui.use('table', function() {
        var table = layui.table;
        var paramCache={};
        var $ = layui.$, active = {
            query: function(){ //添加数据
                /* var checkStatus = table.checkStatus('idTest')
                ,data = checkStatus.data;
                layer.alert(JSON.stringify(data)); */
                var ml=layer.open({
                    type: 2,
                    title: false,
                    area: ['630px', '360px'],
                    btn: ['确定','重置' ,'取消'], //只是为了演示
                    shade: 0.8,
                    closeBtn: 1,
                    shadeClose: true,
                    content: 'departmentController.do?goDepartmentQuery'+param2url(paramCache),
                    yes: function(index,lay){
                        var body = layer.getChildFrame('body', index);
                        var formArr = body.find("form").serializeArray();
                        var param=arr2json(formArr);
                        paramCache=param;
//                        layer.msg("添加成功");
                        table.reload('department',{
                            page: {
                                curr: 1 //重新从第 1 页开始
                            },
                            where:param,
                        });
                        layer.close(index);
                    },
                    btn2: function(index, layero){
                        for(key in paramCache){
                            paramCache[key]="";
                        }
                        table.reload('department',{
                            page: {
                                curr: 1 //重新从第 1 页开始
                            },
                            where:paramCache,
                        });
                    },
                });
                layer.full(ml);
            },
            add: function(){ //添加数据
                /* var checkStatus = table.checkStatus('idTest')
                ,data = checkStatus.data;
                layer.alert(JSON.stringify(data)); */
                var ml=layer.open({
                    type: 2,
                    title: false,
                    area: ['630px', '360px'],
                    btn: ['确定', '取消'], //只是为了演示
                    shade: 0.8,
                    closeBtn: 1,
                    shadeClose: true,
                    content: 'departmentController.do?goDepartmentAdd',
                    yes: function(index,lay){
                        var body = layer.getChildFrame('body', index);
                        var formArr = body.find("form").serializeArray();
                        var param=arr2json(formArr);
                        post("departmentController.do?doDepartmentAdd",param,data=>{
                            layer.msg("添加成功");
                            table.reload('department',{
                                page: {
                                    curr: 1 //重新从第 1 页开始
                                },
                            });
                        });
                        layer.close(index);

                    }
                });
                layer.full(ml);
            },
            edit: function(){
                var checkStatus = table.checkStatus('department')
                        ,data = checkStatus.data;
                if(1!=data.length){
                    layer.msg("请选择一行数据");
                    return;
                }
                data=data[0];
                var ml=layer.open({
                    type: 2,
                    title: false,
                    area: ['630px', '360px'],
                    btn: ['确定', '取消'], //只是为了演示
                    shade: 0.8,
                    closeBtn: 1,
                    shadeClose: true,
                    content: 'departmentController.do?goDepartmentUpdate&id='+data.id,
                    yes: function(index,lay){
                        var body = layer.getChildFrame('body', index);
                        var formArr = body.find("form").serializeArray();
                        var param=arr2json(formArr);
                        post("departmentController.do?doDepartmentUpdate",param,data=>{
                            layer.msg("更新成功");
                            $("button.layui-laypage-btn").click();
                        });
                        layer.close(index);
                    }
                });
                layer.full(ml);
            }
        };
        <#include "/common/post.js"/>

        $('.demoTable .layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
    });
</script>
</body>

</html>